<script setup lang="ts">
import ScrambleDisplayComponent from 'src/components/ScrambleDisplayComponent.vue'
import { useScrambleStore } from 'src/stores/scramble-store'

const puzzle_store = useScrambleStore()
</script>
<template>
  <q-page padding>
    <h4>单词拼写拼图生成器</h4>
    <h5>
      一个在线工具，用于生成可打印的单词拼写谜题，并提供不同风格的解决方案
    </h5>
    <div class="row">
      <div class="col-3">
        <div style="padding-right: 5%">
          <q-form>
            <!-- 主标题 -->
            <div class="row">
              <div class="col-7">
                <q-input
                  outlined
                  v-model="puzzle_store.title"
                  label="标题"
                ></q-input>
              </div>
              <div class="col-2">
                <q-input
                  outlined
                  v-model.number="puzzle_store.title_font_size"
                  label="标题尺寸"
                  type="number"
                />
              </div>
              <div class="col-3">
                <q-input
                  outlined
                  v-model="puzzle_store.title_font_color"
                  label="标题颜色"
                  class="my-input"
                  :input-style="{ color: puzzle_store.title_font_color }"
                >
                  <template v-slot:append>
                    <q-icon name="colorize" class="cursor-pointer">
                      <q-popup-proxy
                        cover
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-color v-model="puzzle_store.title_font_color" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </div>
            </div>
            <div class="row">
              <div class="col-7">
                <q-input
                  outlined
                  v-model="puzzle_store.instruction"
                  label="副标题"
                ></q-input>
              </div>
              <div class="col-2">
                <q-input
                  outlined
                  v-model.number="puzzle_store.instruction_font_size"
                  label="副标题颜色"
                  type="number"
                />
              </div>
              <div class="col-3">
                <q-input
                  outlined
                  v-model="puzzle_store.instruction_font_color"
                  class="my-input"
                  :input-style="{
                    color: puzzle_store.instruction_font_color,
                  }"
                >
                  <template v-slot:append>
                    <q-icon name="colorize" class="cursor-pointer">
                      <q-popup-proxy
                        cover
                        transition-show="scale"
                        transition-hide="scale"
                      >
                        <q-color
                          v-model="puzzle_store.instruction_font_color"
                        />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </div>
            </div>
            <!-- 副标题 -->

            <!-- 单词列表 -->
            <q-input
              v-model="puzzle_store.input_words_textarea"
              filled
              type="textarea"
            />
            <!-- 正方形宽度大小 -->
            <!--
              TOOD 实现拼图大小的改变
            -->
            <q-input
              v-model.number="puzzle_store.box_width"
              label="绘制边框的大小"
              type="number"
              outlined
            />
            <q-input
              outlined
              v-model="puzzle_store.box_color"
              label="绘制方框颜色"
              class="my-input"
              :input-style="{ color: puzzle_store.box_color }"
            >
              <template v-slot:append>
                <q-icon name="colorize" class="cursor-pointer">
                  <q-popup-proxy
                    cover
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <q-color v-model="puzzle_store.box_color" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
            <q-input
              v-model.number="puzzle_store.stroke_width"
              label="绘制边框内描边大小"
              type="number"
              outlined
            />
            <q-input
              outlined
              v-model="puzzle_store.text_color"
              label="绘制字体颜色"
              class="my-input"
              :input-style="{ color: puzzle_store.text_color }"
            >
              <template v-slot:append>
                <q-icon name="colorize" class="cursor-pointer">
                  <q-popup-proxy
                    cover
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <q-color v-model="puzzle_store.text_color" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </q-form>
        </div>
      </div>
      <div class="col-9">
        <ScrambleDisplayComponent />
      </div>
    </div>
  </q-page>
</template>
<style lang="sass" scoped></style>
